<template>
	<view class="scrool-page">
		<view class="header-cont">
			<js-calendar 
				ref="calendar" 
				:showLunar="true" 
				:showMonthBg="true" 
				:showShrink="false" 
				:signList="signList" 
				:day-tag-pos="'bottom-center'" 
				:show-sign-title="false" 
				:startDate="model.startTime" 
				:date="model.startTime" 
				:endDate="model.endTime" 
				shrinkText="我的日程" 
				@dayChange="dayChange" 
				weekType="星期" 
				@monthChange="monthChange" 
				@shrinkClick="shrinkClick">
			</js-calendar>
		</view>
		<view>
			<u-row class="uni-row">
				<u-col>
					<text style="font-weight: bold;">{{ formatDayInfo }}</text>
					<text style="font-size: 13px;">{{ getFestival }}</text>
				</u-col>
			</u-row>
		</view>
		<view class="list-cont">
			<scroll-view class="scrool-more wrap" style="height: 100%" scroll-y="true" scroll-with-animation="true">
				<u-row class="uni-row" v-for="(item, index) in signList" :key="index" @click="toViewDetail(item)">
					<u-col span="2" class="col-label" style="justify-content:center;">
						<view style="text-align: right;">
							<text v-if="item.allDay">全天\n</text>
							<text v-else>{{ item.date|timeFormat('hh:MM') }}\n</text>
							<text v-if="item.isStartFlag && item.isEndFlag">{{ item.endTime|timeFormat('hh:MM') }}\n</text>
							<text v-if="item.isStartFlag && !item.isEndFlag">开始\n</text>
							<text v-if="item.isEndFlag && !item.isStartFlag">结束\n</text>
						</view>
					</u-col>
					<u-col span="10">{{ item.summary }}</u-col>
				</u-row>
			</scroll-view>
		</view>
		<u-popup 
			v-model="popupShow" 
			mode="bottom" 
			:zIndex="996" 
			height="98%" 
			:closeable="true"
		>
			<wechat-schedule-form 
				v-if="['1', '2', '3','4','5'].includes(viewCompRelRemindType)" 
				:id="viewCompRelId" 
				:mode-prop="'view'" 
			>
				<view slot="footerBtns" slot-scope="{msgChild}">
					<!-- 测试孙如何给父传递参数 -->
					<!-- <button>我收到孙子组件的消息是：{{msgChild}}</button> -->
				</view>
			</wechat-schedule-form>
			<wechat-meeting-form 
				v-if="viewCompRelRemindType == '100'" 
				:id="viewCompRelId" 
				:mode-prop="'view'"
			>
				<view slot="footerBtns"></view>
			</wechat-meeting-form>
			<wechat-living-form 
				v-if="viewCompRelRemindType == '101'" 
				:id="viewCompRelId" 
				:mode-prop="'view'"
			>
				<view slot="footerBtns"></view>
			</wechat-living-form>
		</u-popup>
		
	</view>
</template>

<script>
	import JsCalendar from '@/components/js-calendar/js-calendar.vue'
	import calendar from '@/components/js-calendar/calendar.js'
	import WechatScheduleForm from '@/pages/wechat/wechatSchedule/formContainer.vue'
	import WechatMeetingForm from '@/pages/wechat/wechatMeeting/form.vue'
	import WechatLivingForm from '@/pages/wechat/wechatLiving/form.vue'
	
	export default {
		components: {
			WechatScheduleForm,
			WechatMeetingForm,
			WechatLivingForm
		},
		data() {
			return {
				query: {
					
				},
				model:{
					startTime:'',
					endTime:''
				},
				// 日期详情
				dayInfo: '',
				weekArr: ['日', '一', '二', '三', '四', '五', '六'],
				signList: [],
				popupShow: false,
				// 展示详情组件关联的提醒类型（1.日程、2.提醒、3.待办、4.生日、5.纪念日、100.会议、101.直播 、102.课程）
				viewCompRelRemindType: '',
				viewCompRelId: ''
				
			}
		},
		computed: {
			formatDayInfo: function() {
				let dayStr = '';
				if(!this.dayInfo){
					return dayStr;
				}
				const { date,year,month,day,week,lunar } = this.dayInfo;
				dayStr = dayStr.concat(month).concat('月').concat(day).concat('日');
				dayStr = dayStr.concat(' ').concat(' 周').concat(this.weekArr[week]);
				let today = this.$u.timeFormat(new Date(), 'yyyy-mm-dd');
				let yesterday = this.$u.timeFormat(calendar.addDays(today,-1), 'yyyy-mm-dd');
				let tomorrow = this.$u.timeFormat(calendar.addDays(today,1), 'yyyy-mm-dd');
				if(date === today){
					dayStr = dayStr.concat('(今天)')
				}else if(date === yesterday){
					dayStr = dayStr.concat('(昨天)')
				}else if(date === tomorrow){
					dayStr = dayStr.concat('(明天)')
				}
				return dayStr;
			},
			getFestival: function() {
				let festivalStr = '';
				if(!this.dayInfo){
					return festivalStr;
				}
				const { lunar } = this.dayInfo;
				if(lunar.festival){
					festivalStr = festivalStr.concat(' ').concat(lunar.festival);
				}
				if(lunar.lunarFestival){
					festivalStr = festivalStr.concat(' ').concat(lunar.lunarFestival);
				}
				return festivalStr;
			}
		},
		onLoad() {
			
		},
		created() {
			this.loadSignList(true);
		},
		mounted() {
			
		},
		methods: {
			/**
			 * 加载标记列表

			 * @param {Object} isClickToday 是否触发点击今天
			 * @param {Object} yearMonth 年月 
			 */
			loadSignList(isClickToday,yearMonth) {
				if(!yearMonth){
					yearMonth = this.$u.timeFormat(new Date(),'yyyy-mm');
				}
				this.query.yearMonth = yearMonth;
				this.$u.api.wechat.wechatSchedule.convergeMyScheduleList(this.query).then(res => {
					// 目前先按年月加载，添加标记前先删除所有标记
					this.$refs.calendar.deleteAllSignList();
					let list = res.data || [];
					// $refs 只会在组件渲染完成之后生效
					this.$refs.calendar.addSignList(list);
					if(isClickToday){
						// 触发点击今天
						this.$refs.calendar.goToday();
					}
				})
			},
			dayChange(dayInfo) { 
				// 点击日期
				// console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));
				this.dayInfo = dayInfo;
				this.signList = dayInfo.daySign;
			},
			monthChange(monthInfo) { 
				// 切换月份
				// console.log("切换月份", JSON.parse(JSON.stringify(monthInfo)));
				
				// 切换月份同时加载后台数据更改
				let { year,month } = monthInfo;
				let yearMonth = year + "-" + (month < 10 ? '0' + month : month);
				// console.log("当前月份:%s",yearMonth);
				this.loadSignList(false,yearMonth);
			},
			shrinkClick(type) {
				console.log("当前状态", type);
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			compareDate(date1, date2){
			  date1 = new Date(date1.replace(/-/g, "/"));
			  date2 = new Date(date2.replace(/-/g, "/"));
			  if(date1.getTime() > date2.getTime()){
			    return 1;
			  }else if(date1.getTime() < date2.getTime()){
			    return -1;
			  }else{
			    return 0;
			  }
			},
			toViewDetail(item){
				let { id,remindType } = item;
				if(remindType === '102') {
					console.log("课程信息来源于视图，目前没有主键ID，可供查询！");
					return;
				}
				this.viewCompRelRemindType = remindType;
				this.viewCompRelId = id;
				this.popupShow = true;
			}
		}
	}
</script>
 
<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}
	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
 
	.header-cont {
		width: 100%;
		line-height: 100rpx;
		.operation {
			flex-direction: row;
			white-space:nowrap;
			.button {
				color: #ff5500;
				text-decoration: underline;
				margin-left: 30rpx;
			}
		}
	}
 
	.list-cont {
		flex: 1;
		position: relative;
		.scrool-more {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}
	
	.uni-row {
		background: #FFFFFF;
		margin-top: 4rpx;
		height: 90rpx;
	}
	
	.col-label {
		border-right: 1px solid blue;
		height: 90rpx;
		/*设置为伸缩容器*/
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		/*垂直居中*/
		-webkit-box-align: center;/*旧版本*/
		-moz-box-align: center;/*旧版本*/
		-ms-flex-align: center;/*混合版本*/
		-webkit-align-items: center;/*新版本*/
		align-items: center;/*新版本*/
	}
 
	body,html {
		-webkit-user-select: none;
		user-select: none;
		width: 100%;
		height: 100%;
	}
</style>